<app-dialog-custom (ngOnCancel)="handleCancel()" width="100%" [footer]="footer" [title]="title" [content]="content"
  titlePos="center" containerPos="bottomLeft" [visible]="visible" *ngIf="productList$ | async as productList">
  <ng-template #title>
    <span class="order-title">确认订单</span>
    <!-- <p>{{productList$ | async | json}}</p> -->
  </ng-template>
  <ng-template #content>
    <div class="content-container">
      <div class="select-order">
        <div class="img">
          <img [src]="productList[selectedProductIndex].imageUrl" alt="">
        </div>
        <div class="order-detail">
          <div class="price">￥{{productList[selectedProductIndex].price}}</div>
          <div class="selected">{{productList[selectedProductIndex].title}}</div>
          <app-count class="count" (statistics)="getCount($event)"></app-count>
        </div>
      </div>
      <div class="orders">
        <div class="order-item" *ngFor="let item of productList; index as index"
          [ngClass]="{'selected-active': index === selectedProductIndex}" (click)="handleOrderItemClick(index)">
          {{item.title}}
        </div>
      </div>
    </div>
  </ng-template>
  <ng-template #footer>
    <div class="footer-container" (click)="handleAddToCartClick(productList[selectedProductIndex])">
      <div>加入购物车</div>
    </div>
  </ng-template>
</app-dialog-custom>
